<template>
  <div>
    <!-- <div class='head'></div> -->
    <!-- <Chart1></Chart1>  -->
    <el-row :gutter="20">
      <el-col :span="10" :offset="2">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统情况</span>
              <div>
                <el-button @click="startorclose" :type="type1" :disabled="tmp.waitting">{{ str1 }}</el-button>
                <el-button
                  @click="restart"
                  type="primary"
                  :disabled="tmp.waitting || status_data.status === 'off'"
                >重启</el-button>
              </div>
            </div>
          </template>
          <div style="display: flex;" class="text item">
            <div style="width:60%" class="container">
              <div>cqhttp运行状态:</div>
              <div>nonbot运行状态:</div>
              <div>系统状态</div>
              <div>CPU物理核心数:</div>
              <div>CPU逻辑核心数:</div>
              <div>总内存(GB):</div>
              <!-- <div>CPU运行频率MHZ:</div> -->
            </div>
            <div style="width:40%" class="container">
              <div>{{ str2 }}</div>
              <div>{{ str3 }}</div>
              <div>{{ str4 }}</div>
              <div>{{ status_data.cpu_physical_core }}</div>
              <div>{{ status_data.cpu_logical_core }}</div>
              <div>{{ status_data.memory_total }}</div>
              <!-- <div>{{ status_data.cpu_freq}}</div> -->
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :offset="2">
        <el-card class="box-card">
          <div style="margin-bottom:20px">CPU负载</div>
          <el-progress :percentage="status_data.cpu_percent" />
          <div style="margin-bottom:20px">内存占用</div>
          <el-progress :percentage="status_data.memory_percent" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { computed, reactive, ref, getCurrentInstance } from "vue"
let status_data = reactive({})
let tmp = reactive({
  waitting: true
})
let SystemisOn = computed(() => {
  if (status_data.status === 'on') {
    return true
  }
  else if (status_data.status === 'off') {
    return false
  }
  else return undefined
})
let str1 = computed(() => status_data.status === 'off' ? '启动' : '关闭')
let type1 = computed(() => {
  return status_data.status === 'off' ? 'success' : 'danger'
})
let str2 = computed(() => {
  return statusToChinese(status_data.cqhttp_status)
})
let str3 = computed(() => {
  return statusToChinese(status_data.nb_status)
})
let str4 = computed(() => {
  return statusToChinese(status_data.status)
})
function statusToChinese(s) {
  if (s === 'off') {
    return '已关闭'
  }
  else if (s === 'on') {
    return '已启动'
  }
  else {
    return undefined
  }
}
//ajax获取数据
const axios = getCurrentInstance().appContext.app.axios
const ElMessage = getCurrentInstance().appContext.config.globalProperties.$message
axios.get('/api/status/')
  .then(function (response) {
    // console.log(response.data.data)
    let d = response.data.data
    for (let key in d) {
      status_data[key] = d[key]
    }
    tmp.waitting = false
  }).catch(function (error) {
    ElMessage.error('获取数据失败')
    console.log(error)
  })


function startorclose() {
  tmp.waitting = true

  if (status_data.status === 'on') {
    axios.get('/api/switch/?operation=off')
      .then(() => {
        setTimeout(() => {
          tmp.waitting = false
          location.reload()
        }, 3000)
      })
      .catch(() => {
        ElMessage.error('请求失败')
        tmp.waitting = false
      })
  }
  else if (status_data.status === 'off') {
    axios.get('/api/switch/?operation=on')
      .then(() => {
        setTimeout(() => {
          tmp.waitting = false
          location.reload()
        }, 3000)
      })
      .catch(() => {
        ElMessage.error('请求失败')
      })
  }
  
  // console.log(SystemisOn.value)
  // if(SystemisOn.value){
  //   console.log('off')
  //   axios.get('/api/switch/?operation=off').catch(()=>{
  //     ElMessage.error('请求失败')
  //   })
  // }
  // else{
  //   console.log('on')
  //   axios.get('/api/switch/?operation=on').catch(()=>{
  //     ElMessage.error('请求失败')
  //   })

  // }
}
function restart() {
    tmp.waitting = true
    axios.get('/api/switch/?operation=restart')
      .then(() => {
        setTimeout(() => {
          tmp.waitting = false
        }, 3000)
      })
      .catch(() => {
        ElMessage.error('请求失败')
        tmp.waitting = false
      })
  }
// import Char
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.container > div {
  margin-top: 20px;
}
.container > div {
  margin-top: 20px;
}
</style>
